<template>
    <div class="header">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="mid-width">
                        <div class="time-left">{{time}}</div>
                        <div class="ser-tel">服务热线：{{tel}}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <div class="mid-width">
      <span class="header-logo">
        <img src="../assets/images/logo.png">
      </span>
            </div>
        </el-row>
        <el-row class="nav-row">
            <nav-bar></nav-bar>
        </el-row>

    </div>


</template>

<script>
    import NavBar from './navbar'
    export default {
        name: 'NavHeader',
        data() {
            return {
                time: new Date(),
                tel: "0595-86382858"
            }
        },
        methods: {
            showDate() {
                const today = new Date();
                let day
                switch (today.getDay()){
                    case 0:
                        day = "星期日";
                        break;
                    case 1:
                        day = "星期一";
                        break;
                    case 2:
                        day = "星期二";
                        break;
                    case 3:
                        day = "星期三";
                        break;
                    case 4:
                        day = "星期四";
                        break;
                    case 5:
                        day = "星期五";
                        break;
                    case 6:
                        day = "星期六";
                        break;
                    default:
                        day = "星期日";
                        break;
                }
                document.fgColor ="000000";
                this.time = "今天是：" + (today.getFullYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日" + day +"";
            }
        },
        components: {
            NavBar
        },
        mounted(){
            this.showDate()
        }

    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .header {
        .el-row {
            /*margin-bottom: 20px;*/
        }
        .bg-purple-dark {
            background: #eee;
            div {
                line-height: 36px;
                &.time-left {
                    float: left;
                    /*line-height: 30px;*/
                    color: #999999;
                }
                &.ser-tel {
                    float: right;
                }
            }
        }
        .header-logo {
            float: left;
        }
        .grid-content {
            border-radius: 0;
            min-height: 36px;
        }
    }

</style>
